<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸属性</title>
		<style>
			span{
				font-size: 2em;
				color: rgb(85,255,0);
				background-color: rgba(86, 135, 72, 1);
			}
			/* 最大、最小宽度问题 */
			div#container{
				background-color: #f0f0f0;
			}
			div.box{
				background-color: #ff0e42;
				color: #fff;
				width: 80%;
				/* 最大宽度与普通款的同时出现，以最大宽度为准*/
				ma x-width: 650px;
				/* 最小宽度，页面承受最小宽度，小于尺寸，字体或者图片位置不变
				     同时出现 min-width和max-width，最大值大于最小值，以最小值优先
					*/
				   min-width:500px ;
			}
		</style>
	</head>
	<body>
		<!-- 所有属性值单位
		 常用尺寸单位：%、px、像素、 绝对值、em 移动端 字体倍数
		 常用颜色单位:网页三原色:红、绿、蓝，组成页面上的所有颜色
		 rgb(0~255,0~255,0~255)
		 rgba(0~255,0~255,0~255,0~1)遮罩层
		 #rrggbb 十六进制     组成0~9  a~z  A~Z
		 常用十六进制：#000000 黑色  #ffffff 白色
		 简写十六进制：#ffff00 黄色 #000 黑色
		 -->
		<span>Lorem</span>
		<!-- 自适应：最大、最小宽高   最小和最大宽度-->
		<div id="container"></div>
		<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum necessitatibus architecto animi, aliquid veniam consequuntur adipisci officiis blanditiis eum aspernatur culpa quo delectus ipsum sunt placeat facilis ab iste autem?</div>
	</div>
	</body>
</html>